<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--
            v-once指令，如果一个标签添加了v-once，那么这个标签内部的数据绑定只在渲染时绑定一次
        -->
        <p v-once>{{kind}}</p>
        <select v-model="kind">
            <option value="com1">组件一</option>
            <option value="com2">组件二</option>
        </select>

        <!--<com1 v-show="kind=='com1'"></com1>
        <com2 v-show="kind=='com2'"></com2>-->

        <!--
            keep-alive组件之间进行切换时，默认情况下每次都是创建新的组件，切换出去的组件会从内存中删除
            如果希望保留原组件，则需要把组件写在一个keep-alive标签中
        -->
        <keep-alive>
            <!--
                vue中component元素是一个特殊的组件，可以通过is属性设置这个组件显示为哪种组件
            -->
            <component :is="kind"></component>
        </keep-alive>
        
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.component("com1",{
        template:"<div>第一个组件<input ref='xxx'></div>",
        // 生命周期函数
        //组件被创建时的函数
        created:function(){
            console.log(123)
        },
        //组件渲染完毕时的函数
        mounted:function(){
            //在组件的函数中，可以通过this.$el获得组件的根元素，
            //console.log(this.$el)
            console.log(123)
            console.log(this.$refs.xxx)
        },
        //变为活跃状态时的函数
        activated:function(){
            console.log(123)
        },
        destroyed:function(){
            console.log(1234)
        }
    });
    Vue.component("com2",{
        template:"<div>第二个组件<input></div>"
    });

    new Vue({
        el:"#app",
        data:{
            kind:""
        }
    })
</script>
</html>